<template>
  <el-card class="box-card" shadow="never">
    <div slot="header" class="clearfix">
      <div class="head-container">
        <div class="table_title">方案列表</div>
        <el-select
          v-model="query.programmeStates"
          size="small"
          class="filter-item"
          style="width: 200px"
          @change="crud.toQuery"
          clearable
        >
          <el-option label="已注销" :value="0"></el-option>
          <el-option label="激活" :value="1"></el-option>
        </el-select>
        <el-input
          v-model="query.programmeNameOrRef"
          placeholder="方案名称/拼音代码"
          size="small"
          class="filter-item"
          style="width: 200px"
          @keyup.enter.native="crud.toQuery"
        />
        <rrOperation title="查询" />
        <crudOperation :permission="permission" />
      </div>
    </div>
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible.sync="crud.status.cu > 0"
      :title="crud.status.title"
      width="500px"
    >
      <el-form
        ref="form"
        :inline="true"
        :model="form"
        :rules="rules"
        size="small"
        label-width="100px"
      >
        <el-form-item label="方案名称" prop="programmeName">
          <el-input
            v-model="form.programmeName"
            @blur="blurName"
            placeholder="请输入文案名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="拼音代码" prop="programmeRef">
          <el-input v-model="form.programmeRef" disabled />
        </el-form-item>
        <el-form-item label="注销标识" prop="programmeStatesFloat">
          <a-checkbox v-model:checked="form.programmeStatesFloat"
            >注销</a-checkbox
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button
          :loading="crud.status.cu === 2"
          type="primary"
          @click="submitClick"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data[crud.listName]"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column label="序号" width="60px" prop="indexNumber">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="programmeName"
        label="方案名称"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="programmeRef"
        label="拼音代码"
      />
      <el-table-column prop="programmeStates" label="注销">
        <template slot-scope="scope">
          <div class="switch">
            <el-switch
              v-model="scope.row.programmeStates"
              :active-value="1"
              :inactive-value="0"
              :disabled="false"
              active-color="#409EFF"
              inactive-color="#F56C6C"
              @change="changeEnabled(scope.row, scope.row.programmeStates)"
            />
            <span>{{
              scope.row.programmeStates == 1
                ? "激活"
                : scope.row.programmeStates == 0
                ? "注销"
                : ""
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-permission="['admin', 'programme/add', 'programme/delete']"
        label="操作"
        width="130px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope"
          ><div class="btn">
            <el-button
              v-permission="permission.edit"
              style="margin-right: 5px"
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="edit(scope.row)"
            ></el-button>
            <udOperation
              :disabledEdit="true"
              :data="scope.row"
              :permission="permission"
              msg="确定删除吗,如果方案项目则一并删除，此操作不能撤销！"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination />
  </el-card>
</template>

<script>
import crudPlan from "@/api/treatmentProject/plan";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import pagination from "@crud/Pagination";
import * as ajax from "@/api/treatmentProject/plans";
const pinyin = require("js-pinyin");
const defaultForm = {
  programmeId: null,
  programmeName: null,
  programmeRef: null,
  programmeStatesFloat: false,
  programmeStates: 1,
};
export default {
  name: "planLeft",
  components: { crudOperation, rrOperation, udOperation, pagination },
  cruds() {
    return CRUD({
      title: "方案",
      url: "admin/programme/list",
      crudMethod: { ...crudPlan },
      optShow: {
        reset: false,
        add: true,
        edit: false,
        del: false,
        download: false,
        opts: true,
      },
      idField: "programmeId",
      query: {
        programmeStates: 1,
        programmeNameOrRef: "",
      },
    });
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  props: {
    activeRow: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      permission: {
        add: ["admin", "programme/add"],
        edit: ["admin", "programme/add"],
        del: ["admin", "programme/delete"],
      },
      rules: {
        programmeName: [
          { required: true, message: "请输入文案名称", trigger: "blur" },
        ],
      },
      currentRow: null,
    };
  },
  watch: {
    activeRow: function (val, oldVal) {
      this.currentRow = val;
      if (this.currentRow !== null) {
        this.$refs.table.setCurrentRow(val);
      }
    },
  },
  methods: {
    // 改变状态
    changeEnabled(data, val) {
      const displayName = val === 1 ? "激活" : "注销";
      this.$confirm(
        '此操作将 "' + displayName + '" ' + data.programmeName + ", 是否继续？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          ajax
            .updateProgramme({
              programmeId: data.programmeId,
              programmeStates: data.programmeStates,
            })
            .then((res) => {
              this.crud.notify(
                displayName + "成功",
                CRUD.NOTIFICATION_TYPE.SUCCESS
              );
            })
            .catch(() => {
              data.programmeStates = data.programmeStates === 0 ? 1 : 0;
            });
        })
        .catch(() => {
          data.programmeStates = data.programmeStates === 0 ? 1 : 0;
        });
    },
    blurName() {
      this.form.programmeRef =
        this.form.programmeName &&
        pinyin.getCamelChars(this.form.programmeName).toUpperCase();
    },
    submitClick() {
      this.form.programmeStates = this.form.programmeStatesFloat ? 0 : 1;
      this.crud.submitCU();
    },
    edit(data) {
      data.programmeStatesFloat = data.programmeStates == 1 ? false : true;
      this.crud.toEdit(data);
    },
    handleCurrentChange(val) {
      this.$emit("change", val);
    },
    [CRUD.HOOK.afterRefresh](crud) {
      if (crud.data && crud.data.content && crud.data.content.length) {
        if (this.currentRow) {
          const existRow = crud.data.content.find(
            (row) => row.programmeId === this.currentRow.programmeId
          );
          if (!existRow) {
            this.$emit("change", crud.data.content[0]);
          }
        } else {
          this.$emit("change", crud.data.content[0]);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.crud-opts {
  display: inline-flex;
}

.table_title {
  display: inline-block;
  line-height: 30px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  font-weight: bold;
  color: #303133;
  font-size: 15px;
}
.head-container {
  padding-bottom: 0;
  /deep/.filter-item {
    margin-bottom: 0;
  }
}
.switch {
  display: flex;
  span {
    margin-left: 5px;
    display: inline-block;
    min-width: 30px;
  }
}
.btn {
  display: flex;
}
</style>
